.ce {
  @at-root {
    &-process {
      background: rgba(215, 228, 255, 1);
      border-radius: 9px;
      &_inside {
        height: 100%;
        background: linear-gradient(
          225deg,
          rgba(34, 115, 232, 1) 0%,
          rgba(54, 170, 255, 1) 100%
        );
        border-radius: 9px;
      }
    }
    &-search {
      width: 201px;
      height: 36px;
      background: rgba(0, 0, 0, 0.06);
      padding: 0 68px 0 18px;
      box-sizing: border-box;
      position: relative;
      button {
        position: absolute;
        right: 0;
        top: 0;
        width: 50px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 36px;
        i {
          color: #fff;
        }
        background: rgba(173, 218, 233, 1);
      }
      input {
        width: 100%;
        height: 100%;
        &::placeholder {
          font-size: 14px;
          font-family: PingFangSC-Medium;
          font-weight: 500;
          color: rgba(157, 162, 167, 1);
        }
      }
    }
    &-layout {
      padding: 30px 40px 30px;
      box-sizing: border-box;
      min-width: 1194px;
    }
    &-text {
      font-size: 14px;
      color: rgba(35, 119, 233, 1);
    }
    &-tabs {
      .el-tabs__item {
        font-size: 16px;
        height: auto;
        line-height: 1;
        color: #818899;
        padding: 2px 25px 13px 25px;
        transition: all 0.3s linear;
        &:hover,
        &.is-active {
          font-size: 16px;
          font-weight: 600;
          color: rgba(35, 46, 58, 1);
        }
      }
      .el-tabs__active-bar {
        height: 3px;
        background: rgba(39, 149, 253, 1);
      }
    }
    &-icon {
      display: inline-block;
      @include wh(32, 32);
      margin-right: 6px;
      &_search {
        @include bg('~@/assets/images/icons/6_1_1bsourch@2x.png');
        margin-right: 0;
      }
      &_add {
        @include bg('~@/assets/images/icons/6_1_1bcj@2x.png');
      }
      &_import {
        @include bg('~@/assets/images/icons/6_1_1bdr@2x.png');
      }
      &_export {
        @include bg('~@/assets/images/icons/6_1_1bdc@2x.png');
      }
    }
    &-icon_button {
      @include wh(68, 68);
      & + .ce-icon_button {
        margin-left: 14px;
      }
      &.delete {
        @include bg('~@/assets/images/button/6_1_1bsc@2x.png');
      }
      &.modify {
        @include bg('~@/assets/images/button/6_1_1bbx@2x.png');
      }
    }
    &-dropdown {
      display: flex;
      align-items: center;
      height: 20px;
      &.disabled {
        span {
          color: #2377e9;
          font-size: 14px;
          white-space: nowrap;
        }
      }
      & + .ce-dropdown {
        margin-left: 50px;
      }
      label {
        font-weight: 400;
        color: rgba(77, 85, 93, 1);
        font-size: 14px;
        white-space: nowrap;
      }
      span.el-dropdown-selfdefine {
        white-space: nowrap;
        font-size: 14px;
        font-weight: 400;
        color: #333;
        display: flex;
        align-items: center;
        &:after {
          content: '';
          margin-left: 4px;
          display: inline-block;
          @include wh(32, 32);
          @include bg('~@/assets/images/icons/2_1xlk@2x.png');
        }
      }
    }
    &-link {
      font-size: 14px;
      color: #666666;
      transition: color 0.3s linear;
      & + .ce-link {
        margin-left: 30px;
      }
      &:hover,
      &.active {
        color: #333333;
      }
    }
    &-button {
      display: flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
      height: 36px;
      min-width: 120px;
      cursor: pointer;
      // border-radius: 18px;
      border: 1px solid #000;
      font-weight: 500;
      font-size: 14px;
      color: #333333;
      text-decoration: none;
      & + .ce-button {
        margin-left: 20px;
      }
      transition: all 0.3s linear;
      &.border {
        border: 1px solid #333 !important;
      }
      &.primary {
        color: #333333;
        border: 1px solid transparent;
        background: linear-gradient(
          210deg,
          rgba(255, 255, 255, 1) 0%,
          rgba(255, 201, 45, 1) 100%
        );
        // box-shadow: 0px 2px 3px 0px rgba(54, 170, 255, 0.3);
      }
      &:hover:not(.not-hover) {
        background: #ffc92d;
        color: #333;
        // .ce-icon_back {
        //   @include wh(32, 22);
        //   @include bg('~@/assets/images/icons/6_2_1afhtm@2x.png');
        // }
        // .ce-icon_add {
        //   @include bg('~@/assets/images/icons/6_1_1bcjw@2x.png');
        // }
        // .ce-icon_import {
        //   @include bg('~@/assets/images/icons/6_1_1bdr@2x.png');
        // }
        // .ce-icon_export {
        //   @include bg('~@/assets/images/icons/6_1_1bdc@2x.png');
        // }
        // .ce-icon_upload {
        //   @include wh(32, 32);
        //   margin-right: 7px;
        //   @include bg('~@/assets/images/icons/6_1_1bdr@2x.png');
        // }
        // .ce-icon_close {
        //   @include bg('~@/assets/images/icons/7_3_1biaoqianx@2x.png');
        //   @include wh(26, 26);
        // }
        // .ce-icon_jxsk {
        //   @include wh(44, 46);
        //   margin-right: 7px;
        //   @include bg('~@/assets/images/icons/s4_1_1jxskh@2x.png');
        // }
        // .ce-icon_ksxx {
        //   @include wh(44, 44);
        //   margin-right: 7px;
        //   @include bg('~@/assets/images/icons/s4_1_1ksxxh@2x.png');
        // }
        // .ce-icon_hgkc {
        //   @include wh(44, 46);
        //   margin-right: 7px;
        //   @include bg('~@/assets/images/icons/s4_1_1hgkch@2x.png');
        // }
      }
      &_back {
        width: 128px;
      }
      &_cancel {
        width: 120px;
      }
      &_sure {
        width: 120px;
      }
      .ce-icon_hgkc {
        @include wh(44, 46);
        margin-right: 7px;
        @include bg('~@/assets/images/icons/s4_1_1hgkc@2x.png');
      }
      .ce-icon_jxsk {
        @include wh(44, 46);
        margin-right: 7px;
        @include bg('~@/assets/images/icons/s4_1_1jxsk@2x.png');
      }
      .ce-icon_ksxx {
        @include wh(44, 44);
        margin-right: 7px;
        @include bg('~@/assets/images/icons/s4_1_1ksxx@2x.png');
      }
      .ce-icon_back {
        @include wh(32, 22);
        margin-right: 7px;
        @include bg('~@/assets/images/icons/6_2_1bfh@2x.png');
      }
      .ce-icon_upload {
        @include wh(32, 32);
        margin-right: 7px;
        @include bg('~@/assets/images/icons/6_1_1bdcw@2x.png');
      }
      .ce-icon_close {
        @include wh(26, 26);
        margin-left: 10px;
        @include bg('~@/assets/images/icons/7_3_1biaoqianx2@2x.png');
      }
    }
    &-icon {
      width: 32px;
      height: 32px;
      &.mini {
        @include wh(32, 32);
      }
      & + .ce-icon {
        margin-left: 21px;
      }
      &_search {
        @include bg('~@/assets/images/icons/6_1_1bsourch@2x.png');
        margin-right: 0;
      }
      &_add {
        @include bg('~@/assets/images/icons/6_1_1bcj@2x.png');
      }
      &_import {
        @include bg('~@/assets/images/icons/6_1_1bdr@2x.png');
      }
      &_export {
        @include bg('~@/assets/images/icons/6_1_1bdc@2x.png');
      }
      &_click {
        cursor: pointer;
      }
      &_collect {
        @include bg('~@/assets/images/icons/6_2_1bsck@2x.png');
        &.active,
        &:hover {
          @include bg('~@/assets/images/icons/6_2_1aysc@2x.png');
        }
      }
      &_correct {
        @include bg('~@/assets/images/button/4_2_1pg@2x.png');
      }
      &_modify {
        @include bg('~@/assets/images/button/6_1_1bbx@2x.png');
      }
      &_delete {
        @include bg('~@/assets/images/button/6_1_1bsc@2x.png');
      }
    }
    // el-scrollbar组件使用 .ce-scrollbar.scroll-y
    &-scrollbar {
      .el-scrollbar__wrap {
        overflow: hidden;
      }
      &.scroll-x .el-scrollbar__wrap {
        overflow-x: scroll;
      }
      &.scroll-y .el-scrollbar__wrap {
        overflow-y: scroll;
      }
    }
  }
}

.button {
  &-icon {
    margin-right: 7px;
    &_correct {
      @include wh(44, 30);
      @include bgwh('~@/assets/images/icons/4_2_6apg@2x.png', 44, 30);
    }
  }
}
